<!--
 * @Author: licongwei
 * @Date: 2022-03-15 15:17:47
 * @FileDescription:Cpi
-->
<template>
  <com-box :title="data.title">
    <div class="box">
      <div class="box-left">
        <div v-show="state.show" class="box-left-data">
          <p>{{ ber.date ? ber.date : '' }}</p>
          <p>{{ ber.hb ? `环比：${ber.hb}` : '' }}</p>
          <p>{{ ber.tb ? `同比：${ber.tb}` : '' }}</p>
          <p>{{ ber.ljb ? `累计比：${ber.ljb}` : '' }}</p>
        </div>
        <div class="box-left-ber">
          <!-- <charts class="yjjc-charts" :params="state.params"></charts> -->
          <charts class="yjjc-charts" :params="radar.params"></charts>
        </div>
      </div>
      <div class="box-right">
        <div class="box-right-radio">
          <el-radio-group
            v-show="data.title != ''"
            v-model="data.radio"
            class="ml-4"
            @change="data.getData()"
          >
            <el-radio label="环比" size="large">环比</el-radio>
            <!-- <el-radio label="同比" size="large">同比</el-radio>
            <el-radio label="累计比" size="large">累计比</el-radio> -->
          </el-radio-group>
        </div>
        <charts class="box-right-chart" :params="data.params"></charts>
      </div>
    </div>
  </com-box>
</template>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
import { ElRadio, ElRadioGroup } from 'element-plus'
const ber: any = reactive({
  date: '',
  hb: '',
  tb: '',
  ljb: ''
})
// 柱状图
const state: any = reactive({
  show: false,
  params: {
    height: '358px',
    loading: true,
    map: {
      value: '数量'
    },
    options: {
      dataset: {
        dimensions: ['name', 'value'],
        source: []
      },
      xAxis: [
        {
          axisLabel: {
            show: true,
            color: '#DCDCDC',
            fontSize: '12'
          }
        }
      ],
      yAxis: [
        {
          name: '',
          splitLine: {
            show: false
          }
        }
      ],
      legend: {
        show: false
      },
      grid: {
        top: 50,
        bottom: 25
      },
      series: [
        {
          type: 'bar',
          itemStyle: {
            color: [[['#0a73ea', '#00ffa2']]]
          },
          emphasis: {
            label: {
              show: true,
              position: 'top'
            }
          }
        }
      ]
    }
  },
  getData: () => {
    state.params.loading = true
    httpRequest
      .get({
        url: 'M5PeopleLivelihoodDetailPriceIndex'
      })
      .then((res) => {
        if (res.code == 200) {
          ber.date = res.date
          ber.hb = parseInt(res.hb)
          ber.tb = parseInt(res.tb)
          ber.ljb = parseInt(res.ljb)
          if (res.min) {
            state.params.options.yAxis[0].min = res.min
          }
          if (res.max) {
            state.params.options.yAxis[0].max = res.max
          }
          state.params.options.dataset.source = res.data
          state.show = true
        }
        state.params.loading = false
      })
      .catch(() => {
        console.log('请求失败')
      })
  }
})

// 雷达图
const radar: any = reactive({
  show: false,
  params: {
    loading: true,
    custom: true,
    options: {
      dataset: {
        dimensions: [],
        source: []
      },
      radar: {
        indicator: [
          { name: '粮油指数', max: 1000 },
          { name: '肉禽蛋指数', max: 1000 },
          { name: '蔬菜指数', max: 1000 },
          { name: '水果指数', max: 1000 },
          { name: '豆制品指数', max: 1000 }
        ],
        radius: ['0%', '50%'],
        axisName: {
          color: 'rgb(155, 222, 240)',
          fontSize: 16,
          fontFamily: 'Microsoft YaHei'
        },
        axisLine: {
          lineStyle: {
            width: 2,
            color: 'rgb(4, 99, 222)'
          }
        },
        splitLine: {
          lineStyle: {
            width: 2,
            color: 'rgb(4, 99, 222)'
          }
        },
        splitNumber: 4,
        splitArea: {
          show: true,
          areaStyle: {
            // 从右向左 由里向外
            color: [
              'rgba(27, 105, 207, 0.4)',
              'rgba(27, 105, 207, 0.302)',
              'rgba(27, 105, 207, 0.2)',
              'rgba(27, 105, 207, 0.102)'
            ]
          }
        }
      },
      series: [
        {
          type: 'radar',
          areaStyle: {
            color: 'rgba(31, 241, 255, 0.38)'
          },
          lineStyle: {
            width: 2,
            color: 'rgb(31, 241, 255)'
          },
          itemStyle: {
            borderWidth: 3,
            borderColor: 'rgb(31, 241, 255)',
            shadowBlur: 6,
            shadowColor: 'rgba(255, 255, 255, 1)',
            color: '#fff'
          },
          symbolSize: 10,
          data: [
            {
              value: [500, 700, 200, 600, 900]
            }
          ]
        }
      ]
    }
  },
  getData: () => {
    radar.params.loading = true
    setTimeout(() => {
      radar.params.loading = false
    })
  }
})
radar.getData()

// 折线图
const data: any = reactive({
  radio: '环比',
  title: '',
  isGroup: false,
  params: {
    height: '368px',
    loading: true,
    map: {},
    options: {
      dataset: {
        dimensions: [],
        source: []
      },
      title: {
        show: true,
        text: '',
        left: '20',
        top: '10',
        textStyle: {
          fontSize: 18,
          fontFamily: 'Microsoft YaHei',
          color: 'rgba(162, 199, 255,1)'
        }
      },
      legend: {
        right: 0,
        top: 15,
        width: '70%'
      },
      // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
      xAxis: [
        {
          axisLabel: {
            formatter: function (value: string) {
              const srt = value.split('-')
              return srt[0] + '-' + srt[1]
            }
          }
        }
      ],
      yAxis: [
        {
          name: ['', ''],
          position: ['left', ''],
          splitLine: {
            show: false
          }
        }
      ],
      grid: {
        top: 80,
        bottom: 37
      },
      // backgroundColor: '#082f7e',
      dataZoom: [
        {
          show: true,
          type: 'slider',
          start: 0,
          end: 100,
          width: '80%',
          height: 15,
          left: '10%',
          bottom: '13',
          borderColor: '#166beb',
          handleStyle: {
            color: '#166beb',
            borderColor: '#166beb',
            borderWidth: 4
          },
          moveHandleSize: 10,
          moveHandleStyle: {
            color: '#166beb'
          },
          textStyle: {
            color: '#00c6ff'
          },
          emphasis: {
            handleStyle: {
              color: '#00c6ff',
              borderColor: '#00c6ff',
              borderWidth: 4
            },
            moveHandleStyle: {
              color: '#00c6ff'
            }
          }
        }
      ],
      series: [
        {
          type: ['line', 'line', 'line', 'line', 'line'],
          label: {
            show: false
          },
          symbolSize: 7, //折线点的大小
          smooth: true,
          connectNulls: true,
          itemStyle: {
            color: ['#5dec9d', '#ea68a2', '#1da7ff', '#ec6941', '#ffba0a']
          },
          areaStyle: {
            opacity: 0
          }
          // markPoint: {
          //   label: {
          //     show: true,
          //     color: '#fff'
          //   },
          //   data: [
          //     {
          //       type: 'max'
          //     },
          //     {
          //       type: 'min'
          //     },
          //     {
          //       type: 'average'
          //     }
          //   ]
          // }
        }
      ]
    },
    event: {
      customEvent: (chartInstance: any) => {
        chartInstance.group = 'group1'
        data.isGroup = true
      }
    }
  },
  getData: () => {
    data.params.loading = true
    httpRequest
      // .get({ url: 'M5CPILine', params: { dataType: data.radio } })
      .get({
        url: 'M5PeopleLivelihoodPriceIndex',
        params: { dataType: data.radio }
      })
      .then((res) => {
        if (res.code === 200 && Object.keys(res.map).length > 0) {
          data.params.map = res.map
          if (res.min) {
            data.params.options.yAxis[0].min = res.min
          }
          if (res.max) {
            data.params.options.yAxis[0].max = res.max
          }
          data.params.options.dataset.dimensions = [
            'name',
            ...Object.keys(res.map)
          ]
          res.data.forEach((i: { value1: string | number }) => {
            if (i.value1 == 0) {
              i.value1 = ''
            }
          })
          data.params.options.dataset.source = res.data
          data.title = res.title
          data.params.loading = false
        }
      })
      .catch(() => {
        console.log('请求失败')
      })
  }
})
onMounted(() => {
  state.getData()
  data.getData()
})
</script>
<style lang="less" scoped>
.box {
  height: 100%;
  width: 100%;
  // padding: 20px;
  padding-top: 0px;
  display: flex;
  justify-content: space-between;
  &-left {
    flex: 0 0 500px;
    &-data {
      display: flex;
      justify-content: space-between;
      padding: 0px 10px 0px 35px;
      p {
        width: 24%;
        height: 49px;
        background-color: rgba(10, 57, 151, 0.6);
        box-shadow: inset 0px 0px 15.52px 0.48px rgba(39, 115, 230, 0.5);
        font-size: 15px;
        font-family: 'AliHYAiHei';
        color: rgb(20, 236, 249);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 57, 151, 0.6) url('../img/border.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    &-ber {
      height: calc(100% - 50px);
      padding-left: 35px;
    }
  }
  &-right {
    flex: 1;
    padding: 20px;
    height: 100%;
    position: relative;
    &-chart {
      width: 100%;
      height: 100%;
    }
    &-radio {
      z-index: 10;
      position: absolute;
    }
    &::v-deep(.el-radio) {
      --el-radio-input-bg-color: transparent;
      --el-radio-input-border: 2px solid #194998;
      .el-radio__input.is-checked .el-radio__inner {
        background-color: transparent;
      }
      .el-radio__input.is-checked .el-radio__inner::after {
        transform: translate(-50%, -50%) scale(1.4);
        background-color: #00ffff;
      }
    }
    &::v-deep(.el-radio__label) {
      color: rgb(80, 162, 239);
      font-size: 15px;
    }
  }
}
</style>
